<template>
  <div class="apply-meeting">
    <!-- 顶部导航区域 -->
    <!-- :right-text="(jumpType === '0' || meetingStatus === 2 || meetingStatus === 0) ? navRightText : ''" -->
    <van-nav-bar
      :title="userType === 20 || userType === 30 ? '发起会议' : '申请会议'"
      left-arrow
      :safe-area-inset-top="true"
      @click-left="onClickLeft"
    />
    <div class="container">
      <div class="apply-m-body">
        <van-form ref="formValidate">
          <van-cell-group>
            <!-- 会议名称输入区域 -->
            <van-field
              class="meeting-name"
              v-model="name"
              name="name"
              label="会议名称"
              placeholder="请输入会议名称"
              :rules="[{ required: true, message: '会议名称不能为空！' }]"
            />
            <!-- 开始时间选择区域 -->
            <van-field
              v-model="startTime"
              is-link
              readonly
              name="datetimePicker"
              label="开始时间"
              placeholder="请选择开始时间"
              @click="startTimeShowPicker = true"
              :rules="[{ required: true, message: '开始时间不能为空' }]"
            />

            <van-popup v-model:show="startTimeShowPicker" round position="bottom">
              <van-datetime-picker
                type="datetime"
                v-model="currentDate"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="startTimeOnConfirm"
                @cancel="startTimeShowPicker = false"
              />
            </van-popup>
            <!-- 会议时长选择区域 -->
            <van-field
              v-model="timeLenght"
              is-link
              readonly
              name="datetimePicker"
              label="会议时长"
              placeholder="请选择会议时长"
              :rules="[{ required: true, message: '会议时长不能为空' }]"
              @click="endTimeShowPicker = true"
            />
            <van-popup v-model:show="endTimeShowPicker" round position="bottom">
              <van-datetime-picker
                type="time"
                :min-hour="0"
                :max-hour="24"
                @confirm="endTimeOnConfirm"
                @cancel="endTimeShowPicker = false"
              />
            </van-popup>
            <!-- 签到时间范围区域 -->
            <van-field
              v-model="timeFrame"
              is-link
              readonly
              name="datetimePicker"
              label="签到时间范围(分钟)"
              placeholder="请选择签到时间范围"
              :rules="[{ required: true, message: '签到时间范围不能为空' }]"
              @click="timeFraneShowPicker = true"
            />
            <van-popup v-model:show="timeFraneShowPicker" round position="bottom">
              <van-picker
                :columns="timeFrameColumns"
                @confirm="timeFrameOnConfirm"
                @cancel="timeFraneShowPicker = false"
              />
            </van-popup>
            <!-- 会议描述输入区域 -->
            <van-field
              class="meeting-describe"
              v-model="describe"
              name="describe"
              label="会议描述"
              placeholder="请填写会议描述"
              :rules="[{ required: true, message: '会议描述不能为空！' }]"
            />
            <!-- 会议类型选择区域 -->
            <van-field
              class="meeting-type"
              v-model="typeName"
              is-link
              readonly
              name="picker"
              label="会议类型"
              placeholder="请选择会议类型"
              @click="typeShowPicker = true"
            />
            <van-popup v-model:show="typeShowPicker" round position="bottom">
              <van-picker
                :columns="typeColumns"
                :columns-field-names="typeCustomFieldName"
                @confirm="typeOnConfirm"
                @cancel="typeShowPicker = false"
              />
            </van-popup>
            <!-- 会议室选择区域 -->
            <van-field
              v-if="type === 1"
              class="meeting-room"
              v-model="room"
              is-link
              readonly
              name="picker"
              label="会议室"
              placeholder="请选择会议室"
              :rules="[{ required: true, message: '会议室不能为空' }]"
              @click="roomShowPicker = true"
            />
            <van-popup v-model:show="roomShowPicker" round position="bottom">
              <van-picker
                :columns="roomColumns"
                :columns-field-names="roomCustomFieldName"
                @confirm="roomOnConfirm"
                @cancel="roomShowPicker = false"
              />
            </van-popup>
            <!-- 成员选择区域 -->
            <van-cell style="margin-top: 1rem" is-link @click="personShowPicker = true"
              >选择参会人员</van-cell
            >
            <van-popup
              v-model:show="personShowPicker"
              position="bottom"
              :style="{ height: '90%' }"
              round
            >
              <div class="select">
                <div class="title">
                  <span>选择参会人员</span>
                </div>
                <div class="icon" @click="personShowPicker = false">
                  <span style="fontsize: 12px">确定</span>

                  <!-- <van-icon name="cross" /> -->
                </div>
              </div>
              <div class="search">
                <van-field
                  v-model="searchValue"
                  @keyup.enter.prevent="searchPerson"
                  right-icon="search"
                  @update:model-value="searchPerson"
                  placeholder="请输入工号或姓名"
                />
              </div>
              <div class="top-title">
                <span @click="topAllCheckedHanle">全选</span>
                <span class="checked">
                  <van-checkbox
                    v-model="topAllCheck"
                    @click="topAllCheckedHanle(1)"
                  ></van-checkbox>
                </span>
              </div>
              <!-- <div>
                <van-checkbox @click="topAllCheckedHanle"></van-checkbox>
              </div> -->
              <div class="all-person">
                <van-collapse v-model="departmentActiveNames" class="meeting-person">
                  <template v-if="isSearch">
                    <div class="null-person" v-if="searchData.length === 0">
                      <span>未找到该员工！</span>
                    </div>
                    <template v-else>
                      <div v-for="(item, index) in searchData" :key="index">
                        <div class="search-item">
                          <span class="head iconfont icon-touxiang3"></span>
                          <div class="title" @click="checkChangeHandle(item, 'click')">
                            <span>{{ item.name }}</span>
                          </div>
                          <van-checkbox
                            @change="checkChangeHandle(item)"
                            v-model="item.isChecked"
                          ></van-checkbox>
                        </div>
                      </div>
                    </template>
                  </template>
                  <template v-else>
                    <van-collapse-item
                      v-for="(item, key, index) in departmentData"
                      :key="index"
                      :title="key"
                      :name="index + 1"
                    >
                      <div class="all-select" v-if="item.length !== 0">
                        <div class="title">全选</div>
                        <van-checkbox
                          @click="allCheckedHanle(item, index)"
                          v-model="allCheckedList[index]"
                        ></van-checkbox>
                      </div>
                      <p v-if="item.length === 0">该部门暂无成员！</p>
                      <template v-else v-for="(ite, index) in item" :key="index">
                        <div class="person-item">
                          <span class="head iconfont icon-touxiang3"></span>
                          <span class="title" @click="checkChangeHandle(ite, 'click')">{{
                            ite.name
                          }}</span>
                          <van-checkbox
                            @change="checkChangeHandle(ite, 'change')"
                            v-model="ite.isChecked"
                          ></van-checkbox>
                        </div>
                      </template>
                    </van-collapse-item>
                  </template>
                </van-collapse>
              </div>
            </van-popup>
            <!-- 参会人员查看区域 -->
            <van-collapse v-model="activeNames" class="meeting-person">
              <van-collapse-item title="已选参会人员" name="1">
                <template v-if="joinMeetingUser.length !== 0">
                  <span v-for="item in joinMeetingUser" :key="item.number">
                    {{ item.name }}、
                  </span>
                </template>
                <p v-else>暂未选择参会人员</p>
              </van-collapse-item>
            </van-collapse>
          </van-cell-group>
        </van-form>
      </div>
      <div class="goInitiate">
        <div class="btn" v-if="jumpType === '0'" @click="onClickRight">完成</div>
        <div
          class="btn"
          v-if="(userType === 20 || userType === 30) && jumpType === '3'"
          @click="goInitiate"
        >
          确认发起
        </div>

        <div
          class="btn"
          v-else-if="userType === 10 && jumpType !== '0' && jumpType !== '3'"
          @click="goEditInitiate"
        >
          {{ jumpType === "1" ? "确认修改" : "重新发起" }}
        </div>

        <div class="btn withdraw-btn" v-if="jumpType !== '0'" @click="onClickRight">
          撤回
        </div>
      </div>
    </div>
    <van-overlay :show="dataLoading">
      <div class="wrapper">
        <!-- <div class="block"> -->
        <van-loading color="#FFFFFF" type="spinner">数据加载中...</van-loading>
        <!-- </div> -->
      </div>
    </van-overlay>
  </div>
</template>

<script>
import {
  reactive,
  ref,
  toRefs,
  computed,
  onMounted,
  toRaw,
  watch,
  // getCurrentInstance,
} from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import {
  formatStandardTime,
  gettime,
  formatDateTime,
  timeDifference,
  formatSeconds,
  toCompareTimeSize,
} from "@/utils/formatDate.js";
import {
  getCmsRoomByStatus,
  addCmsMeeting,
  getDepartmentUserList,
  updateCmsMeetingById,
  deleteCmsMeetingById,
} from "@/api/home/meetingApply.js";
import { getCmsMeetingById } from "@/api/home/meetingDetail.js";
import { meetingType } from "@/enum.js";
import { validatenull } from "@/utils/validate.js";
import { Notify, Dialog } from "vant";
export default {
  name: "ApplyMeeting",
  setup() {
    const store = useStore();
    const route = useRoute();
    const router = useRouter();

    // let currentInstance = ''

    onMounted(() => {
      // 获取到当前组件实例
      // currentInstance = getCurrentInstance()
      // getDepartMent()
      getAllMeetingRoom();
    });

    // 表单验证绑定的 ref
    const formValidate = ref(null);

    // 传入的会议 id
    const id = route.query.id;
    /**
     * 0 申请会议
     * 1 会议审核中修改会议
     * 2 会议未通过重新发起会议
     * 3 领导确认发起会议
     */
    // 接收到的 jumpType 是 字符串类型
    const jumpType = route.query.type;

    // 数据加载 loading
    let dataLoading = ref(false);

    const meetingApplyData = reactive({
      name: "",
      startTime: gettime(),
      timeLenght: "",
      timeLenghtConst: "",
      describe: "",
      type: 1,
      typeName: "线下会议",
      room: "",
      roomNumber: "",
      timeFrame: "",
      meetingStatus: 0,
      currentDate: new Date(),
    });

    const userName = computed(() => store.getters.getUserName);
    const userNumber = computed(() => store.getters.getUserNumber);
    const userType = computed(() => store.getters.getUserType);
    // console.log(userName, userNumber)

    const showPicker = reactive({
      startTimeShowPicker: false,
      endTimeShowPicker: false,
      typeShowPicker: false,
      roomShowPicker: false,
      personShowPicker: false,
      timeFraneShowPicker: false,
    });

    const typeColumns = [
      { name: "线下会议", value: 1 },
      { name: "线上会议", value: 0 },
    ];
    let roomColumns = ref([]);

    const typeCustomFieldName = { text: "name", value: "type" };
    const roomCustomFieldName = { text: "name", value: "number" };

    const active = reactive({
      activeNames: ["1"],
      departmentActiveNames: ["1"],
    });

    // 导航栏右侧文字
    let navRightText = ref("完成");

    // 获取所有会议室
    async function getAllMeetingRoom() {
      const res = await getCmsRoomByStatus({ status: 1 });
      if (res.data.code !== 200) return;
      res.data.data.forEach((t) => {
        t.name = t.name + " " + `(${t.size}人)`;
      });
      roomColumns.value = [];
      roomColumns.value = [...res.data.data];
      // 获取到所有会议室后再获取会议详情
      getMeetingDetail();
    }

    // 获取会议详情
    async function getMeetingDetail() {
      if (!id) {
        getDepartMent();
        return;
      }

      const res = await getCmsMeetingById({ id });
      const data = res.data.data;
      console.log(res, "会议详情");
      // if (res.data.code !== 200) return console.log('网络链接超时！')

      // 根据会议室 number 查找会议室名称
      let room = "";
      // 判断该会议是否选择会议室
      if (!validatenull(data.roomNumber))
        room = roomColumns.value.find((t) => t.number === data.roomNumber).name;

      meetingApplyData.name = data.name;
      meetingApplyData.startTime = data.startTime;
      meetingApplyData.endTime = data.endTime;
      meetingApplyData.timeLenght = formatSeconds(
        timeDifference(data.startTime, data.endTime)
      );
      meetingApplyData.type = data.type;
      meetingApplyData.roomNumber = data.roomNumber;
      meetingApplyData.room = room;
      meetingApplyData.meetingStatus = data.meetingStatus;
      meetingApplyData.describe = data.describe;
      meetingApplyData.timeFrame = data.timeFrame || "";
      meetingApplyData.typeName = meetingType[data.type];
      joinMeetingUser.value = data.member;

      if (meetingApplyData.meetingStatus === 0 || meetingApplyData.meetingStatus === 2)
        navRightText.value = "撤回";
      // 等获取到会议详情之后再去处理部门及其成员
      getDepartMent();
    }

    /**
     *  选择参会人员部分
     */

    // 部门信息
    let departmentData = reactive({});

    // 已选参会人员
    let joinMeetingUser = ref([]);

    // 搜索值
    let searchValue = ref("");

    // 是否是搜索的值
    let isSearch = ref(false);

    // 搜到的数据
    let searchData = ref([]);

    let totalMember = ref(0);

    // 获取所有部门及其成员
    async function getDepartMent() {
      const res = await getDepartmentUserList();

      // 关闭数据加载
      dataLoading.value = false;

      console.log(res);
      formateDepartment(res.data.data);
      departmentData = Object.assign(departmentData, res.data.data);
    }

    // 处理部门数据
    function formateDepartment(data) {
      for (let item in data) {
        data[item].forEach((t, i) => {
          if (joinMeetingUser.value.length !== 0) {
            t.isChecked = joinMeetingUser.value.find((v) => v.number === t.number)
              ? true
              : false;
          } else {
            t.isChecked = false;
          }

          // 去除部门中的发起会议者
          if (t.number === userNumber.value) {
            data[item].splice(i, 1);
          }

          // 计算总人数
          totalMember.value++;
        });
      }
    }

    // 选择参会人员处理函数
    function checkChangeHandle(e, type) {
      console.log("====");
      // 查找当前所选会议室，拿到会议室容纳人数
      let room = {};
      if (meetingApplyData.roomNumber)
        room = roomColumns.value.find((t) => t.number === meetingApplyData.roomNumber);

      if (joinMeetingUser.value.length >= room.size) {
        Notify({
          type: "warning",
          duration: 1000,
          message: "所选参会人员已达到会议室最大容量！",
        });
        e.isChecked = false;
        return;
      }
      if (type === "click") {
        // 点击姓名
        e.isChecked = !e.isChecked;
      } else {
        // 点击复选框
        if (e.isChecked) {
          joinMeetingUser.value.push(e);
        } else {
          joinMeetingUser.value.forEach((t, i) => {
            if (t.number === e.number) {
              joinMeetingUser.value.splice(i, 1);
            }
          });
        }
      }
      console.log(departmentData);
    }

    // 搜索处理函数
    function searchPerson() {
      // 判断是否有搜索值
      if (!validatenull(searchValue.value)) {
        searchData.value = [];
        isSearch.value = true;
        for (let t in departmentData) {
          // 从部门中查找人员
          const result = departmentData[t].find(
            (x) =>
              String(x.number).includes(String(searchValue.value)) ||
              x.name.includes(searchValue.value)
          );

          // 查找搜索结果中是否有该成员，判断是否再次添加
          let searchRes = null;
          if (result)
            searchRes = searchData.value.find((x) => x.number === result.number);

          if (result && !searchRes) searchData.value.push(result);
        }
      } else {
        searchData.value = [];
        isSearch.value = false;
      }
    }

    let allCheckedList = ref([]);
    // 全选处理函数
    function allCheckedHanle(item, index) {
      console.log(allCheckedList.value);
      console.log(item);
      if (!allCheckedList[index]) {
        allCheckedList[index] = true;
        item.forEach((t) => {
          t.isChecked = true;
        });
      } else {
        allCheckedList[index] = false;
        item.forEach((t) => {
          t.isChecked = false;
        });
      }
    }

    // top 全选变量
    let topAllCheck = ref(false);

    // top全选处理函数
    function topAllCheckedHanle(type) {
      joinMeetingUser.value.length = 0;
      console.log(joinMeetingUser.value, "--0--")
      if (type !== 1) topAllCheck.value = !topAllCheck.value;
      for (let t in departmentData) {
        departmentData[t].forEach((x, i) => {
          x.isChecked = topAllCheck.value;
          if (topAllCheck.value) joinMeetingUser.value.push(x);
          else joinMeetingUser.value.slice(i, 1)
        });
      }
      console.log(joinMeetingUser.value);
      console.log(departmentData);
    }

    watch(joinMeetingUser.value, () => {
      console.log(totalMember.value)
      if (totalMember.value - 1 === joinMeetingUser.value.length) {
        topAllCheck.value = true;
      } else {
        topAllCheck.value = false;
      }
    });

    // 返回处理函数
    const onClickLeft = () => history.back();

    // 选择开始时间处理函数
    function startTimeOnConfirm(value) {
      const standStartTime = formatStandardTime(value);
      if (!toCompareTimeSize(gettime(), standStartTime)) {
        Notify({
          type: "warning",
          duration: 1500,
          message: "所选会议开始时间不能小于当前时间",
        });
        return;
      }
      // console.log(value.toLocaleDateString().split('/')[0].length)
      meetingApplyData.startTime = standStartTime;
      meetingApplyData.endTime = formatDateTime(
        meetingApplyData.timeLenghtConst,
        meetingApplyData.startTime
      );
      showPicker.startTimeShowPicker = false;
    }

    // 会议时长选择处理函数
    function endTimeOnConfirm(value) {
      const startTime = toRaw(meetingApplyData.startTime);
      meetingApplyData.endTime = formatDateTime(value, startTime);

      meetingApplyData.timeLenghtConst = value;
      let valueArr = value.split(":");
      console.log(valueArr, "valarr");
      if (valueArr[0] === "00") {
        meetingApplyData.timeLenght = valueArr[1] + "分钟";
      } else {
        if (valueArr[1] === "00") meetingApplyData.timeLenght = valueArr[0] + "小时";
        else meetingApplyData.timeLenght = valueArr[0] + "小时" + valueArr[1] + "分钟";
      }
      showPicker.endTimeShowPicker = false;
    }

    /**
     * 签到时间范围选择部分
     */

    let timeFrameColumns = [5, 10, 15, 20, 25, 30];

    // 签到时间范围选择处理函数
    function timeFrameOnConfirm(value) {
      meetingApplyData.timeFrame = value;
      showPicker.timeFraneShowPicker = false;
    }

    // 会议类型选择处理函数
    function typeOnConfirm(value) {
      meetingApplyData.type = value.value;
      meetingApplyData.typeName = value.name;
      showPicker.typeShowPicker = false;

      // 如果选择线上会议则把 会议室设为空
      if (value.value === 0) meetingApplyData.roomNumber = "";
    }

    // 会议室选择处理函数
    function roomOnConfirm(value) {
      meetingApplyData.room = value.name;
      meetingApplyData.roomNumber = value.number;
      showPicker.roomShowPicker = false;
    }

    /**
     * 按钮处理区域
     */

    // 提交会议信息处理函数
    function submitMeetingInfo(meetingStatus) {
      // console.log(formValidate.value)
      // currentInstance.proxy.$refs.formValidate
      formValidate.value
        .validate()
        .then(async () => {
          // 申请会议
          let memberNumber = [];

          // let meetingStatus = 0
          // // 申请会议
          // if (jumpType === '0') meetingStatus = 0
          // // 领导确认发起会议
          // else if (
          //   (userType.value === 20 || userType.value === 30) &&
          //   jumpType === '3'
          // )
          //   meetingStatus = 1
          // // 员工修改和重新发起会议
          // else if (userType.value === 10 && (jumpType === '1' || jumpType === '2'))
          //   meetingStatus = 0

          joinMeetingUser.value.forEach((t) => {
            memberNumber.push(t.number);
          });

          // 判断所选人员是否达到会议室最大人数
          let room = {};
          if (meetingApplyData.roomNumber) {
            room = roomColumns.value.find(
              (t) => t.number === meetingApplyData.roomNumber
            );
            if (memberNumber.length > room.size) {
              Notify({
                type: "warning",
                duration: 1000,
                message: "所选参会人员已达到会议室最大容量, 请重新选择！",
              });
              return;
            }
          }

          const obj = {
            name: meetingApplyData.name,
            startTime: meetingApplyData.startTime,
            endTime: meetingApplyData.endTime,
            describe: meetingApplyData.describe,
            meetingStatus,
            type: meetingApplyData.type,
            roomNumber: meetingApplyData.roomNumber,
            userName: userName.value,
            userNumber: userNumber.value,
            memberNumber,
            timeFrame: meetingApplyData.timeFrame,
          };
          console.log(obj);

          // 判断是编辑会议还是添加会议
          if (jumpType === "0") {
            const res = await addCmsMeeting(obj);
            console.log(res);
            if (res.data.code === 400) {
              Notify({
                type: "warning",
                duration: 1000,
                message: res.data.message,
              });
              return;
            }
          } else if (jumpType === "1" || jumpType === "3" || jumpType === "2") {
            obj.id = id;
            const res = await updateCmsMeetingById(obj);
            if (res.data.code === 400) {
              Notify({
                type: "error",
                duration: 1000,
                message: res.data.message,
              });
              return;
            }
          }
          router.go(-1);
        })
        .catch((err) => err);
    }

    // 完成按钮处理函数
    function onClickRight() {
      if (
        (meetingApplyData.meetingStatus === 2 || meetingApplyData.meetingStatus === 0) &&
        jumpType !== "0"
      ) {
        Dialog.confirm({
          title: "警告",
          message: "确定要撤回该会议申请吗？",
        })
          .then(async () => {
            const res = await deleteCmsMeetingById([id]);
            if (res.data.code === 400)
              Notify({
                type: "warning",
                duration: 1000,
                message: res.data.message,
              });
            Notify({
              type: "success",
              duration: 1000,
              message: "撤回成功",
            });
            router.back();
          })
          .catch(() => {
            // on cancel
          });
        return;
      }
      submitMeetingInfo(0);
    }

    // 领导确认发起会议按钮
    function goInitiate() {
      submitMeetingInfo(1);
    }

    // 编辑会议和重新发起会议处理函数
    function goEditInitiate() {
      submitMeetingInfo(0);
    }

    return {
      ...toRefs(meetingApplyData),
      ...toRefs(showPicker),
      ...toRefs(active),
      departmentData,
      typeColumns,
      roomColumns,
      typeCustomFieldName,
      roomCustomFieldName,
      joinMeetingUser,
      timeFrameColumns,
      userType,
      id,
      jumpType,
      navRightText,
      dataLoading,
      searchValue,
      allCheckedList,
      isSearch,
      searchData,
      topAllCheck,
      minDate: new Date(2022, 0, 1),
      maxDate: new Date(2027, 10, 1),
      onClickLeft,
      onClickRight,
      startTimeOnConfirm,
      endTimeOnConfirm,
      typeOnConfirm,
      roomOnConfirm,
      formValidate,
      checkChangeHandle,
      timeFrameOnConfirm,
      goInitiate,
      goEditInitiate,
      allCheckedHanle,
      searchPerson,
      topAllCheckedHanle,
    };
  },
};
</script>

<style lang="scss" scoped>
.apply-meeting {
  width: 100%;
  height: 100vh;
  background-color: var(--global-bg);

  .container {
    width: 100%;
    height: calc(100vh - var(--van-nav-bar-height));
    overflow: auto;

    .van-cell-group {
      background-color: var(--global-bg);
      // margin-top: 1rem;
    }
    .goInitiate {
      width: 100%;
      min-height: 9rem;
      margin-top: 1rem;
      display: flex;
      flex-direction: column;
      // justify-content: space-around;
      align-items: center;
      box-sizing: border-box;
      padding: 1rem 2rem;
      .btn {
        width: 100%;
        height: var(--van-button-default-height);
        border-radius: var(--van-button-round-border-radius);
        margin-top: 1rem;
        background-color: var(--btn-background);
        color: var(--btn-text-color);
        text-align: center;
        line-height: var(--van-button-default-height);
        font-size: var(--van-button-normal-font-size);
        font-weight: 500;
      }
      .withdraw-btn {
        background-color: #f56c6c;
        color: #ffffff;
      }
    }

    .apply-m-body {
      .meeting-name {
        margin-top: 1rem;
        margin-bottom: 1rem;
      }
      .meeting-type {
        margin-top: 1rem;
      }
      .select {
        height: 4rem;
        display: flex;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
        padding: 0 var(--van-cell-horizontal-padding);
        .title {
          flex: 1;
          line-height: 4rem;
          font-size: 1.5rem;
        }
        .icon {
          font-size: 1.8rem;
          width: 5rem;
          text-align: right;
          line-height: 4rem;
          // background-color: rebeccapurple;
        }
      }
      .top-title {
        width: 100%;
        height: 3rem;
        box-sizing: border-box;
        padding: 0 1.6rem;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-size: 1.4rem;
          &:first-child {
            flex: 1;
          }
        }
      }
      .all-person {
        width: 100vw;
        height: calc(100% - 4rem - 3rem - var(--van-cell-line-height) * 2);
        overflow: auto;
      }
      .meeting-person {
        // margin-top: 1rem;
        .null-person {
          box-sizing: border-box;
          padding: 1rem var(--van-cell-horizontal-padding);
          height: 4rem;
          line-height: 3rem;
          span {
            font-size: 1.4rem;
            color: var(--van-collapse-item-content-text-color);
          }
        }
        .search-item {
          @extend .null-person;
          display: flex;
          align-items: center;
          font-size: 1.4rem;

          .head {
            width: 2rem;
            font-size: 1.6rem;
            // background-color: red;
          }
          .title {
            flex: 1;
            span {
              color: var(--van-collapse-item-content-text-color);
            }
          }
        }

        .all-select {
          display: flex;
          height: 3rem;
          line-height: 3rem;
          // background-color: red;

          .title {
            flex: 1;
            // font-size: 1.4rem;
            // font-weight: bold;
            color: #000;
          }
        }

        .person-item {
          display: flex;
          height: 3rem;
          line-height: 3rem;
          align-items: center;
          justify-content: space-between;
          // background-color: antiquewhite;
          box-sizing: border-box;
          // padding: 0 1rem;

          .head {
            width: 2.5rem;
            box-sizing: border-box;
            padding-left: 0.5rem;
            // background-color: red;
          }
          .title {
            flex: 1;
          }
        }
        .van-checkbox {
          &:nth-child(1) {
            margin-top: 0;
          }
        }
      }
    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .block {
      width: 120px;
      height: 120px;
      background-color: #fff;
    }
  }
}
</style>
